<template>
  <Transition :name="disTop > 320 ? 'tooltip_top' : 'tooltip_bottom'">
    <div
      v-if="display"
      ref="tooltipRef"
      class="tooltip"
      :class="[disTop > 320 ? 'at_top' : 'at_bottom']"
    >
      <div v-if="!hasSlot">
        <Circle
          class="circle_box"
          v-bind="{
            stroke: '#00fca3',
            rate: tooltipData.score,
            countColor: '#202121',
            totalScore: 10,
            delay: 450,
            duration: 700,
          }"
        />
        <div class="name">{{ tooltipData.name }}</div>
        <div class="from">{{ tooltipData.from }}</div>
      </div>
      <slot></slot>
    </div>
  </Transition>
</template>

<script lang="ts" setup>
import { toRefs } from 'vue';
import type { Tooltip } from '@/views/Home/nav.vue';
import Circle from '@/components/circle.vue';
interface TooltipProps {
  tooltipData?: Tooltip;
  idx?: number;
  display?: boolean;
  disTop: number;
  hasSlot: boolean;
}

const props = withDefaults(defineProps<TooltipProps>(), {
  hasSlot: false,
});
const { tooltipData = {}, disTop, idx, display, hasSlot } = toRefs(props);
</script>

<style lang="scss" scoped>
.tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.5s ease-out;
  width: 200px;
  height: 260px;
  background-color: #fff;
  z-index: 20;
  text-align: center;
  box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 30%);

  &::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent;
  }

  .circle_box {
    margin: 30px auto 15px;
  }

  .name {
    color: #202121;
  }

  .from {
    color: rgba(32, 33, 33, 0.5);
  }
}

.at_top {
  top: -276px;

  &::before {
    bottom: -16px;
    border-top-color: #fff;
  }
}

.at_bottom {
  top: 55px;

  &::before {
    top: -16px;
    border-bottom-color: #fff;
  }
}

.tooltip_bottom-enter-active {
  transition: all 0.4s ease-in-out;
}

.tooltip_bottom-leave-active {
  transition: all 0.3s ease-in-out;
}

.tooltip_bottom-enter-from,
.tooltip_bottom-leave-to {
  opacity: 0;
  top: 65px;
}

.tooltip_bottom-enter-to,
.tooltip_bottom-leave-from {
  opacity: 1;
  top: 55px;
}

.tooltip_top-enter-active {
  transition: all 0.4s ease-in-out;
}

.tooltip_top-leave-active {
  transition: all 0.3s ease-in-out;
}

.tooltip_top-enter-from,
.tooltip_top-leave-to {
  opacity: 0;
  top: -286px;
}

.tooltip_top-enter-to,
.tooltip_top-leave-from {
  opacity: 1;
  top: -276px;
}
</style>
